<script setup name="skucard">
import { ref } from "vue"
import SkuCardItem from "./SkuCardItem.vue"
import ChooseSku from "@/components/ChooseSku.vue"
import { sku_card_list, btnLoading, bodyLoading, addSkuCardEvent, handleUpdate, handleDelete, sortCard, handleChooesSetGoodsSkusCard } from "@/composables/useSku"

// 规格选择弹窗节点
const ChooseSkuRef = ref(null)

const handleChooseSku = item => {
  ChooseSkuRef.value.open(val => {
    handleChooesSetGoodsSkusCard(item.id, { name: val.name, value: val.list })
  })
}
</script>

<template>
  <el-form-item label="规格选项" v-loading="bodyLoading">
    <el-card shadow="never" v-for="(i, index) in sku_card_list" :key="i.index" v-loading="i.loading" :body-style="{ padding: '10px' }">
      <template #header>
        <div class="form-card">
          <el-input v-model="i.text" size="small" placeholder="规格名称" @change="handleUpdate(i)">
            <template #append>
              <el-icon @click="handleChooseSku(i)"><more /></el-icon>
            </template>
          </el-input>
          <div class="action">
            <el-button size="small" :disabled="index === 0" @click="sortCard('up', index)">
              <el-icon><Top /></el-icon>
            </el-button>

            <el-button size="small" :disabled="index === sku_card_list.length - 1" @click="sortCard('down', index)">
              <el-icon><Bottom /></el-icon>
            </el-button>

            <el-popconfirm width="172px" title="是否要删除该选项？" confirmButtonText="确认" cancelButtonText="取消" @confirm="handleDelete(i)">
              <template #reference>
                <el-button size="small">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </template>
      <SkuCardItem :skuCardId="i.id" />
    </el-card>
    <el-button type="success" size="small" :loading="btnLoading" @click="addSkuCardEvent">添加规格选项</el-button>
  </el-form-item>
  <ChooseSku ref="ChooseSkuRef" />
</template>

<style lang="scss" scoped>
.el-card {
  width: 100%;
  margin-bottom: 6px;
  :deep(.el-card__header) {
    padding: 6px;
  }
  .form-card {
    display: flex;
    align-items: center;
    .el-input {
      width: 40%;
      :deep(.el-input-group__append) {
        cursor: pointer;
      }
    }
    .action {
      margin-left: auto;
      .el-button {
        margin: 0 2px;
      }
    }
  }
}
</style>
